<template>
  <div class="register">
    <div class="head-portrait">
      <img src="../assets/logo.png" alt="">
    </div>
    <app-loading :isHidLoading="isHidLoading"></app-loading>
    <div class="user">
      <div class="userName">
        <span>国家/地区</span>
        <div class="China">
          <span>中国(+86)</span>
          <img src="../assets/go-right.png" alt="">
        </div>
      </div>
      <div class="pas">
        <input type="text" placeholder="请输入手机号码"
               id="labKeyboard"
               v-model.trim="ipt" @focus="keyboardFn">
      </div>
      <div class="enter-ipt">
        <span @click="authCodeFn" :class="{'activeCode':authCode}">获取验证码</span>
      </div>
      <div class="login">
        <router-link tag="span" to="/register/ringUp">账号密码登录</router-link>
      </div>
    </div>
    <!--弹框-->
    <message :theme=messageTheme :message.sync="messageShow" >
      <span>{{pleaseEnter}}</span>
    </message>

    <label for="labKeyboard">
      <my-keyboard :keyboard.sync="keyboardShow"></my-keyboard>
    </label>

  </div>
</template>

<script>
  export default {
    name: "login",
    data(){
      return{
        ipt:'',
        pleaseEnter:"请输入合法手机号",
        keyboardShow:false,
        authCode:false,
        cancel:false,
        messageTheme:0,
        isHidLoading:false,
        messageShow:false,
        code:1
      }
    },
    watch:{
      ipt(){
        if(/^1[35789][0-9]{9}$/.test(this.ipt)){
          this.authCode = true;
          this.keyboardShow = false;
        }else if(!/^1[35789][0-9]{9}$/.test(this.ipt)&&this.ipt.length===11){
          this.messageShow = true;
          this.pleaseEnter="请输入合法手机号";
        } else if(this.ipt.length>11){
          this.messageShow = true;
          this.pleaseEnter="请输入合法手机号";
          this.authCode = false;
        }else {
          this.authCode = false;
        }
      }
    },
    created(){
      this.$bus.$on('model',(val)=>{
          this.ipt = val;
      });
      this.$bus.$emit('cache',this.ipt);

    },
    methods:{
      keyboardFn(){
        document.activeElement.blur();
        this.keyboardShow = true;

      },
      // 发送请求
      authCodeFn(){
        let _this = this;
        if(!this.authCode){
          return;
        }
        if(this.authCode){
          this.isHidLoading = true;
          this.$http.put('/api/user',{
            telNumber:_this.ipt,
          },
          {
            withCredentials:true,
          }
          ).then((req)=>{
            if(req.data.code===1){
              this.isHidLoading = false;
              this.$store.state.telNumber = req.data.msg;
              this.$router.push({'name':'authCode'});
            }else {
              this.pleaseEnter = req.data.msg;
              this.messageShow = true;
            }
          });
        }
      }
    }
  }
</script>

<style scoped>
  .register-header>img{
    float: left;
    width: 30px;
    margin-top: 20px;
  }
  .register-header>span{
    float: right;
    font-size: 34px;
    color: #2d2d2d;
  }
  .head-portrait{
    height: 200px;
    width: 100vw;
    text-align: center;
  }
  .head-portrait>img{
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin-top: 10px;
  }
  .user{
    width: 100vw;
    box-sizing: border-box;
    padding: 0 50px;
  }
  .userName,.pas{
    margin-top: 40px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    line-height: 100px;
  }
  .userName>span{
    font-size: 34px;
    color: #333333;
  }
  .China{
    width: 200px;
    float: right;
    display: inline-block;
  }
  .China>img{
      width: 32px;
    margin-top: 5px;
    vertical-align: middle;
  }
  .China>span{
    font-size: 34px;
    color: #333333;
    vertical-align: middle;
  }
  input{
    border: none;
    outline: none;
    height: 99px;
    caret-color: #5f5f5f;
    font-size: 38px;
    color: #333333;
  }
  input::placeholder{
    color: #9a9a9a;
    font-size:36px;
  }
  .pas>input{
    width: 100%;
  }
  .enter-ipt{
    width: 100%;
    margin-top: 100px;
    text-align: center;
  }
  .enter-ipt>.activeCode{
    background: linear-gradient(to left,#31e07c,#1cd245);
  }
  .enter-ipt>span{
    display: inline-block;
    width: 90%;
    height: 90px;
    line-height: 90px;
    background: #bcf3cf;
    color: #fff;
    font-size: 36px;
    border-radius: 50px;
    border-top: 2px solid #9cd0b4;
    border-bottom: 2px solid #9cd0b4;
  }
  .login{
    height: 110px;
    line-height: 110px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
  }
  .login>span{
    font-size: 30px;
    color: #575757;
  }
</style>

